<template>
  <ArtSearchBar ref="searchBarRef" v-model="formData" :items="formItems" :rules="rules" @reset="handleReset"
    @search="handleSearch" />
</template>

<script setup lang="ts">
import { useDictStore } from '@/store/modules/dict';


interface DeptOption { dept_code: string; dept_name: string }

interface Props {
  modelValue: Record<string, any>
  departments?: DeptOption[]
  thirdDepartments?: DeptOption[]
}
interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
  (e: 'search', params: Record<string, any>): void
  (e: 'reset'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()
const dict = useDictStore()

const industryOptions = computed(() => dict.getOptions('industry'))
const staffOptions = computed(() => dict.getOptions('staff'))

// 表单数据双向绑定
const searchBarRef = ref()
const formData = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 校验规则（可按需扩展）
const rules = {
  // name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
}

// 动态 options
const statusOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([])
const deptOptions = computed(() => (props.departments || []).map((d) => ({ label: d.dept_name, value: d.dept_code })))
const thirdDeptOptions = computed(() => (props.thirdDepartments || []).map((d) => ({ label: d.dept_name, value: d.dept_code })))
const pmOptions = ref<{ label: string; value: string; disabled?: boolean }[]>([
  { label: '是', value: 'Y' },
  { label: '否', value: 'N' }
])

// 模拟接口返回状态数据（可替换为真实接口）
function fetchStatusOptions(): Promise<typeof statusOptions.value> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { label: '启用', value: '1' },
        { label: '禁用', value: '0' }
      ])
    }, 300)
  })
}

onMounted(async () => {
  statusOptions.value = await fetchStatusOptions()
})

// 搜索项配置
const formItems = computed(() => [
  {
    label: '姓名',
    key: 'name',
    type: 'input',
    props: { placeholder: '请输入姓名', clearable: true }
  },
  {
    label: '事业部',
    key: 'department',
    type: 'select',
    props: { placeholder: '请选择部门', options: deptOptions.value, filterable: true, clearable: true }
  },
  {
    label: '三级部门',
    key: 'third_department',
    type: 'select',
    props: { placeholder: '请选择三级部门', options: thirdDeptOptions.value, filterable: true, clearable: true }
  },
  {
    label: '类型',
    key: 'type',
    type: 'select',
    props: { placeholder: '请输入类型', options: staffOptions.value, clearable: true }
  },
  {
    label: 'PM',
    key: 'pm',
    type: 'select',
    props: { placeholder: '请选择PM', options: pmOptions.value, clearable: true }
  },
  {
    label: '状态',
    key: 'status',
    type: 'select',
    props: { placeholder: '请选择状态', options: statusOptions.value, clearable: true }
  },
  {
    label: '主管',
    key: 'supervisor',
    type: 'input',
    props: { placeholder: '请输入主管', clearable: true }
  },
  {
    label: '行业',
    key: 'industry',
    type: 'select',
    props: { placeholder: '请输入行业', options: industryOptions.value, clearable: true }
  }
])

// 事件
function handleReset() {
  emit('reset')
}

async function handleSearch() {
  // 如需校验可启用：await searchBarRef.value?.validate()
  emit('search', formData.value)
}
</script>